<template>
  <div class="app-data">
    <div class="common-content cont-main">
      <div class="left-group">
        <component :is="componentTag" :datas="datas"></component>
        <!--<StackedLineVue></StackedLineVue>-->
      </div>
    </div>
    <div class="right-group">
      <el-scrollbar style="height: 100%">
        <div class="right-nav-group">
          <template v-for="(item,index) in echartNav">
            <div class="echart-nav-item" :class="[{'echart-nav-active':componentTag === item.comp}]" :key="index"
                 @click="echartTemplateTap(item)">
              <img class="echart-nav-img" :src="item.img" :alt="item.name" :title="item.name">
            </div>
          </template>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import StackedLineVue from "./comp/StackedLine";
import DynamicBarLine from "./comp/DynamicBarLine";
import {mapGetters} from 'vuex'

export default {
  title: '可视化',
  name: "AppVisual",
  components: {StackedLineVue, DynamicBarLine},
  data() {
    return {
      componentTag: 'StackedLineVue',
      echartNav: [
        {name: '', comp: 'StackedLineVue', img: '/static/images/line-simple.webp'},
        {name: '', comp: 'DynamicBarLine', img: '/static/images/dynamic-data.webp'},
      ],
      datas: []
    };
  },
  computed: {
    ...mapGetters(['wsAppData', 'appStatusData'])
  },
  watch: {
    wsAppData(val) {
      if (this.datas.length > 60) {
        this.datas.shift()
      }
      this.datas.push({
        date: val.data.date,
        airspeed: parseFloat(val.data.airspeed),  // 飞行速度
        height: parseFloat(val.data.height),      // 飞行高度
        longitude: parseFloat(val.data.longitude),// 经度
        latitude: parseFloat(val.data.latitude),  // 纬度
      })
    },
    appStatusData(val) {
      // if (this.datas.length < 100) {
      //   this.datas.push(val.data)
      // } else {
      //   this.datas.unshift()
      //   this.datas.push(val.data)
      // }
    }
  },
  methods: {
    echartTemplateTap(item) {
      if (item.comp === this.componentTag) {
        return false
      }
      this.componentTag = item.comp
    }
  }
};
</script>

<style lang="less" scoped>
  .app-data {
    height: 100%;
    width: 100%;
    padding: 15px;
    display: flex;

    .cont-main {
      height: 100%;
      padding: 15px;
      flex: 1;

      .left-group {
        height: 100%;
      }
    }

    .right-group {
      width: 200px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      margin-left: 15px;

      .right-nav-group {
        .echart-nav-item {
          cursor: pointer;
          padding: 0 5px;
          font-size: 0;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          .echart-nav-img {
            width: 100%;
            border: solid 2px transparent;
            border-radius: 6px;
            opacity: 0.7;
            transition: all 0.3s;

            &:hover {
              opacity: 1;
              border: solid 2px #0694ce;
            }
          }

          &.echart-nav-active {
            .echart-nav-img {
              opacity: 1;
              border: solid 2px #0694ce;
            }
          }
        }
      }
    }
  }
</style>>
